<!-- 添加修改地址 -->
<template>
  <view class="address-wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <view class="address-box">
        <!-- 地址表单 -->
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人" prop="consignee">
          <u-input placeholder="请输入收货人姓名/昵称" v-model="model.consignee" type="text"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="性别">
          <view class="big">
            <text @click="witch(1)" :class="switchFlag == true ? 'left' : 'right'">先生</text>
            <text @click="witch(2)" :class="switchFlag == true ? 'right' : 'left'">女生</text>
          </view>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="联系方式" prop="phone">
          <u-input placeholder="请输入收货人联系方式" v-model="model.phone" type="number"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="收货地址:" prop="area_text">
          <u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区" @click="showSelect = true"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:" prop="address">
          <u-input type="textarea" v-model="model.address" placeholder="请输入详细地址小区/楼栋号" />
        </u-form-item>
      </view>
      <!-- 设置默认 -->
      <view class="default-box u-flex u-row-between">
        <text class="title">设为默认地址</text>
        <u-switch v-model="model.is_default" activeColor="#001B0A" size="40"></u-switch>
      </view>

      <!-- 功能按钮 -->
      <view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
        <!-- <button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1" @tap="deleteAddress">删除收货地址</button> -->
        <button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存</button>
      </view>
    </u-form>

    <!-- 省市区选择器 -->
    <u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect" @confirm="regionConfirm"></u-select>
  </view>
</template>

<script>
import { area, edit, info } from '@/api/api.js';
// import Auth from '@/shopro/permission/index.js';
export default {
  components: {},
  data() {
    return {
      showSelect: false, //省市区
      addressAreaList: [],
      addressId: 0, //收货地址ID
      labelStyle: {
        'font-size': '28rpx',
        'font-weight': '600',
        color: '#595959'
      },
      model: {
        id: 0,
        consignee: '',
        phone: '',
        area_text: '',
        address: '',
        is_default: false,
        latitude: '',
        longitude: '',
        sexuality: ''
      },
      rules: {
        phone: [
          {
            required: true,
            message: '请输入收货人联系方式',
            trigger: ['change', 'blur']
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur']
          }
        ],
        consignee: [
          {
            required: true,
            message: '请输入收货人姓名/昵称',
            trigger: ['change', 'blur']
          }
        ],
        area_text: [
          {
            required: true,
            message: '请选择地区',
            trigger: ['change', 'blur']
          }
        ],
        address: [
          {
            required: true,
            message: '请输入详细地址小区/楼栋号',
            trigger: ['change', 'blur']
          }
        ]
      },
      errorType: ['message'],
      switchFlag: true,
      sexuality: null
    };
  },
  computed: {},
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(e) {
    this.getArea();
    this.addressId = e ? e.id : 0;
    console.log(this.addressId);
    uni.setNavigationBarTitle({
      title: this.addressId ? '编辑收货地址' : '添加收货地址'
    });
    this.addressId && this.getAddressInfo();
    // 微信导入
    this.$Route.query.addressData && this.wxAddressInit();
  },
  methods: {
    witch(id) {
      if (id == 1) {
        this.switchFlag = false;
        this.sexuality = '先生';
      } else if (id == 2) {
        this.switchFlag = true;
        this.sexuality = '女生';
      }
    },
    // 获取省市区
    async getArea() {
      let res = await area();
      // console.log(res, 'eeee');
      if (res.code === 1) {
        let { provinceData, cityData, areaData } = res.data;
        provinceData.forEach((item, index) => {
          this.addressAreaList.push({ ...item, children: [] });
          this.addressAreaList[index].children.push(...cityData[index]);
          this.addressAreaList[index].children.forEach((item1, index1) => {
            item1['children'] = [];
            item1.children.push(...areaData[index][index1]);
          });
        });
      }
    },
    // 微信导入数据格式
    wxAddressInit() {
      let wxAddress = this.$Route.query.addressData; //微信导入
      this.model.id = 0;
      this.model.consignee = wxAddress.userName;
      this.model.phone = wxAddress.telNumber;
      // #ifdef MP-WEIXIN
      this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
      // #endif
      // #ifdef H5
      this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
      // #endif
      this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
      this.model.is_default = false;
    },

    // 确认省市区
    regionConfirm(e) {
      this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
    },
    // 提交
    submit() {
      this.$refs.uForm.validate(valid => {
        valid ? this.editAddress() : console.log('验证失败');
      });
    },

    // 编辑添加地址
    async editAddress() {
      if ((this.switchFlag = false)) {
        this.model.sexuality = '先生';
      } else if ((this.switchFlag = true)) {
        this.model.sexuality = '女士';
      }
      let res = await edit({ ...this.model, id: this.addressId });
      if (res.code == 1) {
        this.$msg('保存成功');
        setTimeout(() => {
          // uni.navigateTo({
          // 	url: '/pages/address/address'
          // });
          uni.navigateBack();
        }, 1000);
      }
    },

    // 地址信息
    async getAddressInfo() {
      let res = await info({ id: this.addressId });
      console.log(res);
      if (res.code === 1) {
        let addressData = res.data;
        this.addressId = addressData.id;
        this.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
        this.model.is_default = addressData.is_default === '1' ? true : false;
        this.model.address = addressData.address;
        this.model.phone = addressData.phone;
        this.model.consignee = addressData.consignee;
      }
      // const that = this;
      // this.$http('address.info', {
      // 	id: that.$Route.query.id
      // }).then(res => {
      // 	if (res.code === 1) {
      // 		let addressData = res.data;
      // 		that.addressId = addressData.id;
      // 		that.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
      // 		that.model.is_default = addressData.is_default === '1' ? true : false;
      // 		that.model.address = addressData.address;
      // 		that.model.phone = addressData.phone;
      // 		that.model.consignee = addressData.consignee;
      // 	}
      // });
    }

    // 删除收货地址
    // deleteAddress() {
    // 	const that = this;
    // 	that.$http(
    // 		'address.del',
    // 		{
    // 			id: that.addressId
    // 		},
    // 		'删除中...'
    // 	).then(res => {
    // 		if (res.code === 1) {
    // 			that.$Router.back();
    // 		}
    // 	});
    // }
  }
};
</script>

<style lang="scss">
// 点击定位
.location-item {
  font-size: 28rpx;
  font-weight: 500;
  background-color: #fff;
  color: rgba(167, 111, 13, 1);
}

// 表单
.address-box {
  background-color: #fff;
  padding: 0 48rpx;
  .big {
    width: 176rpx;
    height: 50rpx;
    border-radius: 80rpx;
    background-color: #eeeeee;
    display: flex;
    line-height: 50rpx;
    // margin-left: 50rpx;
    .left {
      width: 88rpx;
      height: 50rpx;
      background: #001b0a;
      border-radius: 76rpx 76rpx 76rpx 76rpx;
      font-size: 28rpx;
      font-family: Source Han Sans SC-Regular, Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 33rpx;
      text-align: center;
      line-height: 50rpx;
    }
    .right {
      width: 88rpx;
      text-align: center;
    }
  }
}
.address-item {
  height: 96rpx;
  background: #fff;
  border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
  padding: 0 25rpx;

  .item-title {
    color: #333;
    font-size: 28rpx;
    white-space: nowrap;
  }
  .inp {
    color: #333;
    font-size: 28rpx;
  }
}
.area-box {
  min-height: 120rpx;
  padding-bottom: 60rpx;
  background: #fff;
  padding: 30rpx 25rpx;
  .item-title {
    font-size: 28rpx;
    line-height: 28rpx;
    vertical-align: middle;
    white-space: nowrap;
  }
  .area-inp {
    color: #333;
    font-size: 28rpx;
    vertical-align: middle;
    margin-top: 8rpx;
    width: 550rpx;
  }
}
.default-box {
  height: 100rpx;
  padding: 0 25rpx;
  background: #fff;
  margin-top: 20rpx;
  .title {
    font-size: 28rpx;
  }
  .switch {
    transform: scale(0.8);
  }
}
// 底部按钮
.foot_box {
  .delete-btn {
    line-height: 70rpx;
    background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
    box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border-radius: 35rpx;
    padding: 0;
    margin-right: 20rpx;
  }
  .save-btn {
    line-height: 70rpx;
    background: rgba(0, 27, 10, 1);
    border: 1rpx solid rgba(238, 238, 238, 1);
    border-radius: 40rpx;
    color: rgba(#fff, 0.9);
  }
}
</style>
